<template>
	<view class="container">
		<!-- 搜索框 -->
		<Search class="search-wrapper" @select-place="handlePlaceSelect" />
		<map class="map-wrapper" :latitude="latitude" :longitude="longitude" :markers="markers"/>
		<!-- 获取导航按钮 -->
		<view class="nav-wrapper"v-if="destination"@click="getRoute">获取导航</view>
		<view class="icon-button-box">
		  <view class="icon-button">
		    <image src="@/static/img/index/no-motorbike.png" mode="aspectFit" />
		    <text>禁摩地图</text>
		  </view>
		  <view class="icon-button">
		    <image src="@/static/img/index/shop.png" mode="aspectFit" />
		    <text>商家服务</text>
		  </view>
		</view>

	</view>
</template>

<script>
import MapView from '@/components/MapView/index.vue';
import Search from '@/components/Search/index.vue'; // 导入搜索框组件
export default {
	components: {
		MapView,
		Search
	},
	data() {
		return {
			latitude: 0, // 当前纬度
			longitude: 0, // 当前经度
			mapInstance: null,
			markers: [],
			destination: null,
			mapInstance: null
		};
	},
	onReady() {
		this.loadMiniProgramTencentMap();
	},
	methods: {
		loadMiniProgramTencentMap() {
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log(res);
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					this.markers = [
						{
							id: 1,
							latitude: res.latitude,
							longitude: res.longitude,
							title: '当前位置',
							iconPath: '/static/img/location.png', // 请确保该图标存在，或使用内置图标
							width: 32,
							height: 32
						}
					];
				},
				fail: console.error
			});
		},
		//更新地点选中
		handlePlaceSelect({ lat, lng, title, destination }) {
			this.destination = destination;
			this.setCenterAndMarker(lat, lng, title);
		},
		//定位功能柜
		setCenterAndMarker(lat, lng, title) {
			this.latitude = lat;
			this.longitude = lng;
			this.markers = [
				{
					id: 1,
					latitude: lat,
					longitude: lng,
					title: title,
					iconPath: '/static/img/location.png',
					width: 32,
					height: 32
				}
			];
		},
		getRoute() {
			uni.navigateTo({
				url: `/pages/route/index?startLat=${this.latitude}&startLng=${this.longitude}&endLat=${this.destination.location.lat}&endLng=${this.destination.location.lng}`
			});
		}
	}
};
</script>
<style scoped>
.container {
	width: 100%;
	height: 100vh;
}

.map-wrapper {
	width: 100%;
	height: 100vh;
}
.search-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background-color: white;
	z-index: 999999;
	/* 确保搜索框浮动在最上层 */
	padding: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	/* 增加阴影效果 */
}
/* 公共悬浮按钮样式 */
.nav-wrapper {
  position: fixed;
  z-index: 9999;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: #007aff;
  color: white;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
}

/* 禁摩地图按钮容器样式 */
.icon-button-box {
  position: absolute;
  right: 10px;
  top: 200rpx;
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); /* 轻微阴影提升立体感 */
  color: white;
  border-radius: 20rpx;
  padding: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 9999;
}

/* 图标和文字垂直排列样式 */
.icon-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50px;
    margin-top: 10px;
}

/* 图标图片样式 */
.icon-button image {
  width: 50px;
  height: 50px;
}

/* 图标文字样式 */
.icon-button text {
  margin-top: 4px;
  font-size: 24rpx;
  text-align: center;
  display: block;
  width: 100%;
  color: black;
}
</style>
